<script setup>
import { provide } from "vue";
import { RouterView } from "vue-router";
import { updateDrawer, toggleDrawer, drawerOpened } from "./state/drawer";
import "@material/web/focus/md-focus-ring.js";
import GlobalDrawer from "@/components/drawer/GlobalDrawer.vue";
import DrawerSwitchButton from "./components/drawer/DrawerSwitchButton.vue";

// TODO: remove them from the top level app component, and use Pinia
provide("drawerOpened", drawerOpened);
provide("updateDrawer", updateDrawer);
provide("toggleDrawer", toggleDrawer);

</script>

<template>
  <div id="wrapper">
    <DrawerSwitchButton id="drawer-switch"></DrawerSwitchButton>
    <GlobalDrawer id="drawer" :class="{ expanded: drawerOpened }"></GlobalDrawer>
    <main id="content">
      <RouterView v-slot="{ Component, route }">
        <Transition name="page">
          <div role="presentation" :key="route.path">
            <Component :is="Component" />
            <md-focus-ring></md-focus-ring>
          </div>
        </Transition>
      </RouterView>
    </main>
  </div>
</template>

<style scoped>
#wrapper {
  display: grid;
  height: 100%;
  grid-template-areas: "header header"
    "switch content"
    "drawer content";
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
}

header {
  grid-area: header;
}

#drawer {
  grid-area: drawer;
}

#content {
  grid-area: content;
  display: grid;
  grid-template-areas: "pane";
  overflow: hidden;
}

#drawer-switch {
  grid-area: switch;
  margin: 16px;
}

#content>div {
  grid-area: pane;
  background-color: var(--md-sys-color-background);
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  outline: none;
  position: relative;
}

#content>div>md-focus-ring {
  border-radius: 24px;
  left: 4px;
  top: 4px;
  left: 4px;
  right: 4px;
}

.page-enter-active {
  z-index: 1000000;
}

.page-enter-active,
.page-leave-active {
  transition-property: opacity, transform;
  transition-duration: var(--md-sys-motion-duration-short2);
  transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}

.page-enter-to,
.page-leave-from {
  opacity: 1;
}

.page-enter-from {
  opacity: 0;
}

#drawer {
  width: calc(var(--navigation-drawer-normal-width) + 2 * var(--navigation-drawer-padding));
  position: relative;
  overflow-y: auto;
  transition-property: opacity, width;
  transition-duration: var(--md-sys-motion-duration-long4);
  transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}

#drawer.expanded {
  width: calc(var(--navigation-drawer-expanded-width) + 2 * var(--navigation-drawer-padding));
}
</style>
